<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备运行状态</title>
</head>
<link href="../../css/index.css" rel="stylesheet">

<body>
  <div id="status-content">
    <div class="message" :class="message.type" v-if="message.text">{{message.text}}</div>
    <table border="1">
      <tr>
        <th class="area-title">路口</th>
        <th class="area-title">计划周期</th>
        <th class="area-title">当前周期</th>
        <th class="area-title">需求周期</th>
        <th class="area-title">计划相位差</th>
        <th class="area-title">当前相位差</th>
        <th class="area-title">主相位</th>
        <th class="area-title">绿信比</th>
        <th class="area-title">结婚</th>
        <th class="area-title">锁方</th>
        <th class="area-title">锁绿</th>
        <th class="area-title">锁差</th>
        <th class="area-title">操作</th>
      </tr>
      <tr class="center" v-for="(item, index) in timeData" :class="index % 2 === 0 ? 'odd' : 'even'" :key="item.ssId">
        <td>{{item.site}}</td>
        <td>{{item.plan.cycle}}</td>
        <td>{{item.info.cycle}}</td>
        <td>{{item.info.rCycle}}</td>
        <td>{{item.plan.offset}}</td>
        <td>{{item.info.offset}}</td>
        <td>{{item.plan.varph}}</td>
        <td>{{item.plan.split}}</td>
        <td>
          <input type="checkbox" :checked="item.info.married" disabled />
        </td>
        <td>
          <input type="checkbox" :checked="item.lock.split" disabled />
        </td>
        <td>
          <input type="checkbox" :checked="item.lock.offset" disabled />
        </td>
        <td>
          <input type="checkbox" :checked="item.lock.subsys" disabled />
        </td>
        <td>
          <button @click="handleEditTime(item)">
            编辑
          </button>
        </td>
      </tr>
      <tr v-if="loading.table">
        <th colspan="13">
          <img src="../../assets/jiazai.png" class="loading" />
        </th>
      </tr>
    </table>
  </div>
</body>
<script src="../../config.js"></script>
<script src="../../js/vue3.js"></script>
<script src="../../js/mock/firstEdition/argumentWatchMock.js"></script>
<script>
  const {createApp, ref, nextTick, reactive, onMounted, onUnmounted, watch, computed} = Vue
  const app = createApp({
    setup() {

      const MESSAGE_TYPE = {
        'SUCCESS': 'success',
        'INFO': 'info',
        'ALERT': 'alert',
        'ERROR': 'error'
      }

      const loading = reactive({
        reload: false, // 刷新时段
        open: false, // 开启子区开关
        close: false, // 关闭子区开关
        table: false, // 表格刷新
        editTime: false, // 编辑时段
        deleteTime: false, // 删除时段
      })

      const message = reactive({
        type: '',
        text: ''
      })

      // 弹窗消息1.5秒消失
      watch(
        () => message.text,
        () => {
          if(message.text) {
            setTimeout(() => {
              message.text = ''
            }, 2000)
          }
        }
      )

      // ------------- 时段配置 ---------------
      let timeData = ref([])

      // 获取时段表配置
      const getTimeConfig = () => {
        loading.table = true
        fetch(apiUrl + '/utch-itsg/schedule/listAll')
        .then(res => res.json())
        .then(res => {
          console.log('res', res)
          timeData.value = res.data
        })
        .catch(error => {
          message.text = error.msg || '列表返回数据失败'
          message.type = MESSAGE_TYPE.ERROR
        }).finally(() => {
          loading.table = false
          if (isMock) {  
            message.text = '请注意当前处于mock模式'
            message.type = MESSAGE_TYPE.INFO
            timeData.value = mockData.data
          }
        })
      }

      // 编辑时段
      const handleEditTime = (item) => {
        
      }

      onMounted(() => {
        getTimeConfig()
      })

      return {
        message,
        loading,
        timeData,
        handleEditTime,
      }
    }
  })
  app.mount("#status-content");
</script>

</html>